<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/6.magnifier.css">
</head>

<body>
    <header>

    </header>
    <!-- 放大镜 -->
    <div class="enlarge">
        <div class="waihefd">
            <div id="small-box">
                <div id="mask"></div>
            </div>
            <div id="big-box"></div>

            <div class="selects">
                <div><img src="./img/0.jpg" alt=""></div>
                <div><img src="./img/1.jpg" alt=""></div>
                <div><img src="./img/2.jpg" alt=""></div>
                <div><img src="./img/3.jpg" alt=""></div>
                <div><img src="./img/4.jpg" alt=""></div>
            </div>
        </div>
        <!-- 产品介绍 -->
        <div class="imgintroduce">
            <div class="introducetitle">【新品上市】坚果G9S</div>
            <div class="moneyufd">
                <span class="presentpricefd">￥2999.00</span>
                <span class="originalpricefd">¥2999.00</span>
                <div class="shuliangfd">
                    <span class="shuliangfdtext">数量</span>
                    <span class="jisuankuangfd">
                        <span class="Dynamicquantityfd">

                            <button onclick="funJian()">-</button>
                            <input id="valueNum" type="text" value="1">
                            <button onclick="funAdd()">+</button>
                        </span>
                    </span>
                    <div class="CommodityOperation">
                        <div class="caozuokeyfd">
                            <a href="8.ShoppingCart.html" class="addtocart">加入购物车</a>
                            <a href="#" class="Buynow">立即购买</a>
                        </div>
                    </div>
                    <div class="maiofuwu">
                        <ul>
                            <li class="zhengpingfd">
                                <span></span>
                                <h6> 官方品质</h6>
                            </li>
                            <li class="baoyoufd">
                                <span></span>
                                <h6> 满百包邮</h6>
                            </li>
                            <li class="shohofd">
                                <span></span>
                                <h6>售后政策</h6>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- 版心部分 -->
    <div class="banxingfd">
        <p class="imgtu1">
            <img src="./images/96.jpg" alt="">
        </p>
        <p class="imgtu2">
            <img src="./images/97.jpg" alt="">
        </p>
        <p class="imgtu3">
            <img src="./images/98.jpg" alt="">
        </p>
        <p class="imgtu4">
            <img src="./images/99.jpg" alt="">
        </p>
        <p class="imgtu5">
            <img src="./images/100.jpg" alt="">
        </p>
        <p class="imgtu6">
            <img src="./images/101.jpg" alt="">
        </p>
        <p class="imgtu7">
            <img src="./images/102.jpg" alt="">
        </p>
        <p class="imgtu8">
            <img src="./images/103.gif" alt="">
        </p>
        <p class="imgtu9">
            <img src="./images/104.jpg" alt="">
        </p>
        <p class="imgtu10">
            <img src="./images/105.jpg" alt="">
        </p>
        <p class="imgtu11">
            <img src="./images/106.jpg" alt="">
        </p>
        <p class="imgtu12">
            <img src="./images/107.jpg" alt="">
        </p>
    </div>
    <footer>

    </footer>
</body>

</html>
<script src="./js/jQuery.js"></script>
<script src="./js/6.magnifier.js"></script>

<script>
    //获取商品页跳转过来的ID
    console.log(location.search.split("=")[1])
    $.get("./goods/getGoodsInfo.php",{
        goodsId:location.search.split("=")[1],
    },function(data){
        console.log(JSON.parse(data))
        let str = JSON.parse(data);
        console.log(str.goodsImg)
        $("#small-box").css({
            backgroundImage:`url(${str.goodsImg})`
        })

        $("#big-box").css({
            backgroundImage:`url(${str.goodsImg})`
        })

        $(".introducetitle").html(str.goodsName)
        $(".presentpricefd").html(`￥`+str.goodsPrice)
    })









    $(".addtocart").click(function () {
        let params = {
            vipName: '小江',
            goodsId: '001',
            goodsCount: document.querySelector('.addtocart').value
        }
        $.post("./goods/addShoppingCart.php", params, function (res) {
            console.log('responseText', res)
        })
    })
</script>